<template>
    <div class="store-box">
        <TitleHeader name="店铺管理" btn="保存" :event="save"></TitleHeader>
        <p>店铺名称<el-input class="store-input" v-model="storeInfo.name" placeholder="请输入内容" style="width:400px"></el-input></p>
        <p>店铺公告<el-input class="store-input" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="storeInfo.bulletin" style="width:400px"></el-input></p>
        <p class="demo-fit ">
             <span class="title">店铺头像</span>
           <el-upload class="avatar-uploader store-input" action="http://127.0.0.1:5000/shop/upload" :show-file-list="false"
           :on-success="handleAvatarSuccess"> <img v-if="imageUrl" :src="imageUrl" class="avatar">
         <i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>
        </p>
        <p>店铺图片<el-upload class="store-input" action="http://127.0.0.1:5000/shop/upload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="success" :file-list="storeimg"><i class="el-icon-plus" ></i></el-upload>
            <el-dialog :visible.sync="dialogVisible" ><img  style="width:100px"></el-dialog></p>
            <p><span class="textsty">配送费</span><el-input class="store-input" v-model="storeInfo.deliveryPrice" placeholder="配送费" style="width:400px"></el-input></p>
            <p>配送时间<el-input class="store-input" v-model="storeInfo.deliveryTime" placeholder="配送时间" style="width:400px"></el-input></p>
            <p>配送描述<el-input class="store-input" v-model="storeInfo.description" placeholder="配送描述" style="width:400px"></el-input></p>
            <p>店铺评分<el-input class="store-input" v-model="storeInfo.score" placeholder="店铺评分" style="width:400px"></el-input></p>
            <p> <span class="textsty1">销量</span> <el-input class="store-input" v-model="storeInfo.sellCount" placeholder="销量" style="width:400px"></el-input></p>
            <p><span class="textsty1">活动</span><el-checkbox-group class="store-input" v-model="storeInfo.supports">
                <el-checkbox v-for="item in supportsList" :key="item" :label="item" ></el-checkbox>
            </el-checkbox-group></p>
            <p>添加活动<el-input class="store-input" placeholder="添加活动" v-model="support" style="width:280px"></el-input><el-button @click="addsupport">添加活动</el-button></p>
            <p>营业时间<el-time-picker class="store-input" is-range v-model="storeInfo.date" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
               placeholder="选择时间范围"></el-time-picker></p>
    </div>
</template>
<script>
import TitleHeader from '../../components/TitleHeader';
import {storeInfo,editStoreInfo} from '@/apis/store'
    export default {
        data(){
            return{
                dialogVisible: false,
                storeInfo:'',
                imageUrl:'',
                storeimg:[],
                image:[],
                supportsList:[],
                support:'',
                storeHead:''
            }
        },
        methods:{
            save(){
                let{bulletin,date,deliveryPrice,deliveryTime,description,id,minPrice,name,score,sellCount,supports}=this.storeInfo;
                 this.$confirm('此操作将修改店铺信息, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
              .then(() => {
               editStoreInfo({avatar:this.storeHead,bulletin,date:JSON.stringify(date),deliveryPrice,deliveryTime,description,id,minPrice,name,score,sellCount,supports:JSON.stringify(supports),pics:JSON.stringify(this.image)}).then(res=>{
                    if(res.data.code==0){
                        this.$message({type: 'success',message: '臭臭世界提示:修改成功!',center: true});
                        
                    }else{
                        this.$message({type: 'error',message: '臭臭世界提示:修改失败!',center: true});
                    }
                })
                 })
                 .catch(() => {this.$message({type: 'success',message: '臭臭世界提示:已取消成功',center: true});});  
              
            },
            //店铺头像上传成功
            handleAvatarSuccess(res){
               let oldimg= this.imageUrl;
               this.imageUrl=oldimg.substring(0,oldimg.lastIndexOf('/')+1)+res.imgUrl;
                this.storeHead=res.imgUrl;
            },
            handlePictureCardPreview(file){
                  this.dialogImageUrl = file.url;
                  this.dialogVisible = true;
            },
             handleRemove(file) {
             if(file.response){
                for (let i = 0; i < this.image.length; i++) {
                    if(file.response.imgUrl==this.image[i]){
                     this.image.splice(i,1);
                     break   
                    }
                    } 
             }else{
                 for (let j = 0; j < this.image.length; j++) {
                    if(file.name==this.image[j]){
                     this.image.splice(j,1);
                     break   
                    }
             }
             }
             
             
         },
         success(res){
             if(res.code==0){
                 this.$message({ message: '臭臭世界系统提示:图片上传成功!',type: 'success',center: true});
                 this.image.push(res.imgUrl)
             }

         },
         addsupport(){
             this.supportsList.push(this.support)
         }
        },
      components:{
          TitleHeader,
      } ,
      created(){
          storeInfo().then(res=>{
              this.storeInfo=res.data.data;
              this.imageUrl=res.data.data.avatar;
              this.storeHead=this.imageUrl.substring(this.imageUrl.lastIndexOf('/')+1)
              this.supportsList=JSON.parse(JSON.stringify(res.data.data.supports))
              for (let i in this.storeInfo.pics) {
                 this.storeimg.push({name:this.storeInfo.pics[i].substring(this.storeInfo.pics[i].lastIndexOf('/')+1),url:this.storeInfo.pics[i]})
                 this.image.push(this.storeInfo.pics[i].substring(this.storeInfo.pics[i].lastIndexOf('/')+1))
                  }

          })
      } 
    }
</script>

<style lang="less" >
.store-input{
    margin: 0 10px;
}
p{
    margin-left: 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    .textsty{
        margin-left: 16px;
    }
    .textsty1{
         margin-left: 32px;
    }
}
.store-head{
    margin-left: 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }

</style>